<template>
    <div id="thIndex_" class="padding">
        <div class="padding">
            <el-button type="primary" @click="handleClick(null,'add')">发布新公告</el-button>
        </div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="title"
                    label="头">
            </el-table-column>
            <el-table-column
                    prop="brief"
                    label="简介">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="内容">
            </el-table-column>
            <el-table-column
                    prop="ygmc"
                    label="创建人">
            </el-table-column>
            <el-table-column
                    prop="create_at"
                    label="创建时间"
                    sortable
                    :formatter="formatter">
            </el-table-column>
            <el-table-column
                    prop="update_at"
                    label="更新时间"
                    sortable
                    :formatter="formatter">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="300">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row,'edit')" size="small">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="padding" style="float: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="pageSizes"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination>
        </div>
        <!--add-->
        <div id="add" style="display: none" class="padding">
            <div class="padding">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="头" prop="title">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="简介" prop="brief">
                        <el-input v-model="form.brief"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" prop="content">
                        <el-input type="textarea" rows="6" v-model="form.content"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="save('form')">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!--edit-->
        <div id="edit" style="display: none" class="padding">
            <div class="padding">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="头" prop="title">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="简介" prop="brief">
                        <el-input v-model="form.brief"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" prop="content">
                        <el-input type="textarea" rows="6" v-model="form.content"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="update('form')">修改</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatDateTime} from '../../../../common/js/util';
    export default {
        name: "notify",
        beforeCreate: function () {
            this.$nextTick(function () {
                this.page = 1;
                this.limit = this.pageSizes[0];
                this.searchList(this.limit,this.page);
            });
        },
        data() {
            return {
                tableData: [],
                page: 0,
                count: 0,
                limit: 0,
                pageSizes: [30, 90, 120, 300],
                form:{
                    title:" ",
                    brief:" ",
                    content:" "//加空格防止会出现 element-ui 验证出现问题
                },
                rules: {
                    title: [
                        {required: true, message: '请输入活动名称', trigger: 'change'}
                    ],
                    brief: [
                        {required: true, message: '请输入简介', trigger: 'change'}
                    ],
                    content: [
                        {required: true, message: '请输入内容', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            formatter(row, column, cellValue, index){
                return formatDateTime(cellValue);
            },
            searchList(limit,page){
                this.$post('crm-notify/list',{limit:limit,page:page})
                    .then((response) => {
                        if (response.data.code == 1) {
                            this.tableData=response.data.data;
                            this.page = response.data.page;
                            this.count = parseInt(response.data.count);
                        }else{//失败
                        }
                    }).catch((response) => {
                    consoleLog(response)
                });
            },
            handleSizeChange(val) {
                this.searchList(val,this.page);
            },
            handleCurrentChange(val) {
                this.searchList(this.limit,val);
            },
            handleClick(val,type) {
                if (type=='add'){
                    this.form = {
                        title:'',
                        brief:'',
                        content:'',
                    };
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['70%','70%'], //宽高
                        close: true,
                        title: '新增公告',
                        shadeClose: true,
                        content: $('#add'),
                        end: () => {
                        }
                    });
                }else if(type=='edit'){
                    this.form = val;
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['70%','70%'], //宽高
                        close: true,
                        title: '修改公告',
                        shadeClose: true,
                        content: $('#edit'),
                        end: () => {
                        }
                    });
                }
            },
            save:function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$post('crm-notify/save',{CrmNotify_:this.form})
                            .then((response) => {
                                if (response.data.res == 1) {
                                    this.$message({'message':'新增成功','type':'success'});
                                }else{//失败
                                    this.$message({'message':response.data.data[0],'type':'error'});
                                }
                            }).catch((response) => {
                            consoleLog(response)
                        });
                    } else {
                        return false;
                    }
                });
            },
            update:function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form['update_at'] = this.$my_.getTimeStamp(new Date());
                        this.$post('crm-notify/update',{CrmNotify_:this.form})
                            .then((response) => {
                                if (response.data.res == 1) {
                                    this.$message({'message':'修改成功','type':'success'});
                                }else{//失败
                                    this.$message({'message':response.data.data[0],'type':'error'});
                                }
                            }).catch((response) => {
                            consoleLog(response)
                        });
                    } else {
                        return false;
                    }
                });
            }
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>